<script>
import MyBase from '@/common/formComponent/MyBase';
import UniInpit from 'uview-ui/components/u-input/u-input';
export default {
  name: 'MyInput',

  components: {
    MyBase
  },

  model: {
    prop: 'value',
    event: 'update:value'
  },

  props: {
    value: {
      type: [String, Number],
      default: ''
    },

    title: {
      type: String,
      default: ''
    },

    type: { // textarea  input
      type: String,
      default: 'input'
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    },

    placeholder: {
      type: String,
      default: '请输入'
    },

    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: '' // moments
    }
  },

  render(h) {
    const inputEvents = {
      input: e => {
        if (!this.disabled) {
          this.$emit('update:value', e);
        }
      }
    };
    const baseSlots = {
      header: () => {
        return (
          <view>
            { this.title }
          </view>
        );
      },

      content: () => {
        return h(UniInpit, {
          on: inputEvents,
          props: {
            value: this.value,
            placeholder: this.placeholder,
            placeholderStyle: "fontSize: '16px'",
            customStyle: {
              fontSize: '16px'
            },
            disabled: this.disabled,
            border: false,
            borderColor: '#dcdfe6',
            type: this.type
          }
        });
      }
    };

    return (
      <My-Base icon={this.icon} isShowIconArrow={this.isShowIconArrow} scopedSlots={ baseSlots }/>
    );
  }
};
</script>

<style lang="scss" scoped>
</style>
